<!-- 头部插件 -->
<template>
  <div>

    <div class="head-box">
      <div class="main-center head-box1" >
            <div class="logo">
              <img :src="logo_pic" alt="logo">
            </div>
            <ul class="head-ul-list">
              <li style="margin-right: 0">
                <a href="https://twitter.com/oxford_int" target="_blank" class="switter erweima">
                  <img src="../../assets/weixin.jpg" alt="" class="erweimapic">
                  <i class="iconfont2">&#xe63f;</i>
                </a>
              </li>
              <li style="margin: 0">
                <a href="https://www.facebook.com/oxfordinternationaleducationgroup" target="_blank" class="switter erweima">
                  <img src="../../assets/weibo.jpg" alt="" class="erweimapic">
                  <i class="iconfont">&#xe608;</i>
                </a>
              </li>
              <li>
                <a href="https://instagram.com/oxford_international/" target="_blank" class="switter erweima">
                  <img src="../../assets/zhihu.jpg" alt="" class="erweimapic">
                  <i class="iconfont1">&#xe69a;</i>
                </a>
              </li>
              <li><a href="mailto:info@oxfordinternational.com"  target="_blank" class="switter"><i class="iconfont">&#xe63e;</i></a></li>
            </ul>



        <!--隐藏菜单-->
        <div class="mobil-menu">
          <span>MENU</span>
          <i class="iconfont">&#xe605;</i>
        </div>
      </div>
    </div>
    <div class="head-box2">
      <ul class="main-center menu-list-box">
        <li v-for="(i,index) in menu" :key="index" :class="index==current1?'active':''" >
          <div class="sanjiao" v-if="i.children"></div>
          <div class="daohang-title" @click="home(i.name)">

            <span>{{i.name}}</span>
            <i class="iconfont dingwei" v-if="i.children">&#xe638;</i>
          </div>


          <ul class="caidan" v-if="i.children">
            <li v-for="(m,index1) in i.childrenMenu" :key="index1" :class="index==current1?index1==current2?'active':'':''" @click.stop="menuBtn(index,index1,m.link)">{{m.name}}</li>
          </ul>
        </li>
        <!--<li>
          <a href="" class="active">首页</a>
        </li>
        <li>
          <a href="">页面一</a>
          <ul class="caidan">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
          </ul>
        </li>
        <li><a href="">页面儿</a></li>
        <li><a href="">页面三</a></li>
        <li><a href="">页面四</a></li>-->
      </ul>
    </div>

  </div>
</template>


<script>
import logopic from '@/assets/logo-v3.png'
// import store from '@/store'
// import NewsNotify from './NewsNotify'

let navList1 = ['网站首页', '资产交易', '信息披露', '会员服务', '政策服务', '关于我们']
let navList2 = ['index', 'propsTrade', 'info', 'vip', 'law', 'about']

let navShowName = ['index', 'vip', 'about', 'law', 'info', 'propsTrade']
let navBGCName = ['index', 'login', 'vip', 'about', 'law', 'info', 'propsTrade']
let propsTradeChildPath = ['/propsTrade/tradeinfo', '/propsTrade/tradeenroll']

export default {
  components: {
    // NewsNotify
  },
  props: {},
  data() {
    return {
      navList1,
      navList2,
      currIndex: 0,
      logo_pic:logopic,
      current1:0,
      current2:0,
      Hhigh:92,
      logoHigh:50,
      opacity:1,
      menu:[
        {
          name:'首页',
          children:false,
          link:'home',
          childrenMenu:[
            {
              name:'子菜单1',
              link:'zicaidan1'
            }
          ]
        },
        {
          name:'私立中学',
          children:true,
          link:'yemian1',
          childrenMenu:[
            {
              name:'牛津德欧中学',
              link:'dvb'
            },
            {
              name:'牛津国际高中',
              link:'oic'
            },
            {
              name:'牛津学院',
              link:'oxsfc'
            }
          ]
        },
        {
          name:'合作大学',
          children:true,
          link:'yemian2',
          childrenMenu:[
            {
              name:'班戈大学',
              link:'bangor'
            },
            {
              name:'邓迪大学',
              link:'dundee'
            },
            {
              name:'德蒙福特大学',
              link:'montfort'
            },
            {
              name:'格林威治大学',
              link:'greenwich'
            },
            {
              name:'雅各布大学',
              link:'Jacobs'
            },
            /*{
              name:'与学生大使交流',
              link:'/yemian2/zicaidan3-3'
            },*/
            {
              name:'申请',
              link:'application'
            }
          ]
        },
        {
          name:'关于我们',
          children:true,
          link:'yemian1',
          childrenMenu:[
            /*{
              name:'介绍',
              link:'agents'
            },*/
            {
              name:'核心价值观',
              link:'corevalue'
            },
            {
              name:'隐私条款',
              link:'policy'
            }
          ]
        },
        {
          name:'代理服务',
          children:true,
          link:'yemian1',
          childrenMenu:[
            {
              name:'介绍',
              link:'agents'
            },
            {
              name:'资料下载',
              link:'download'
            },
            /*{
              name:'联系合作',
              link:'pwu'
            }*/
          ]
        },
      ]
    }
  },
  computed: {

  },

  methods: {
    menuBtn(a1,a2,link){
      console.log('a1',a1)
      console.log('a2',a2)
      this.current1 = a1
      this.current2 = a2
      this.herfto(link)
    },
    navChange(item, index) {
      this.currIndex = index
      let pathName = this.navList2[index]
      this.herfto(pathName)
    },
    ulogout() {
      this.$confirm('是否退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({path: '/login'})
        })
      })
    },
    herfto(link) {
      this.$router.push({path: `/${link}`})
      // this.currIndex = this.navList2.indexOf(name)
    },
    home(txt){
      if (txt=='首页'){
        this.herfto('index')
        this.current1 = 0
        this.current2 = 0
      }
    },
    handleScroll() {
//获取滚动时的高度
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop == 0) {
        //滚动大于0的时候要做的操作
        this.Hhigh = 92
        this.logoHigh = 50
        this.opacity = 1
      }
      if (scrollTop > 100) {
        //大于100的时候要做的操作
        this.Hhigh = 52
        this.logoHigh = 30
        this.opacity = 0
      }
    }
  },
  watch: {
    '$route.name': function (newVal, oldVal) {
      let pathName = this.$route.name
      this.currIndex = this.navList2.indexOf(pathName)
    }
  },
  created() {},
  mounted() {
    let pathName = this.$route.name
    this.currIndex = this.navList2.indexOf(pathName)
    window.addEventListener("scroll",this.handleScroll);
  }
}
</script>


<style lang='less' scoped>
@media screen and ( max-width: 980px ) {
  .menu-list-box{
    display: none !important;

  }
  .main-center{
    width: 100% !important;
    padding: 0 10px !important;
  }
  .head-box{
    height: 52px !important;
  }
  .logo{
    height: 30px !important;
  }
  .head-ul-list{
    display: none !important;
    height: 100%;
  }
  .mobil-menu{
    display: flex !important;
    align-items: center;
  }
}
  .head-box{
    height: 92px;
    transition: all 0.2s ease;
    background: rgba(48,48,48,.73);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
.head-box2{
  background: #fff;
}
  .head-box1{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }


  .logo{
    height: 50px;
    transition: all 0.2s ease;
    img{
      height: 100%;
    }
  }
.active{
  background: #ccc;
}
  .menu-list-box{
    height: 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
    li.active{
      background: #ccc;
    }
    li{
      height: 100%;
      cursor: pointer;
      position: relative;
      span{
        /*padding: 15px 30px;
        display: block;*/
        text-decoration: none;
        font-size: 16px;
        color: #303030;
        position: relative;
      }
      span.active{
        background: #ccc;
      }
      .sanjiao{
        position: absolute;
        display: none;
        content: '';
        width: 20px;
        height: 20px;
        background: #3281c4;
        transform: rotate(45deg);
        bottom: -10px;
        left: 50%;
        margin-left: -10px;
        z-index: 99;
      }

      .caidan{

        position: absolute;
        padding-top: 20px;
        width: 200px;
        left: 0;
        top: 100%;
        display: none;
        background: #fff;
        li{
          cursor: pointer;
          line-height: 40px;
          padding-left: 10px;
        }
        li:hover{
          background: #3281c4;
          color: #fff;
        }
      }
    }
    li:hover{
      background: #3281c4;
      .sanjiao{display: block}
      .caidan{
        display: block;

      }
      span{
        background: #3281c4;
        color: #fff;
      }
      span:before{
        display: block;
      }
      .dingwei{
        color: #fff;

      }
    }

  }
@font-face {
  font-family: 'iconfont';  /* project id 2160786 */
  src: url('//at.alicdn.com/t/font_2160786_c9g5lfro17.eot');
  src: url('//at.alicdn.com/t/font_2160786_c9g5lfro17.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2160786_c9g5lfro17.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2160786_c9g5lfro17.woff') format('woff'),
  url('//at.alicdn.com/t/font_2160786_c9g5lfro17.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2160786_c9g5lfro17.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:28px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}
.iconfont1{
  font-family:"iconfont" !important;
  font-size:22px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}
.iconfont2{
  font-family:"iconfont" !important;
  font-size:30px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 5px;
}
  .head-ul-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    align-items: center;
    li{
      margin: 0 5px;
      color: #fff;
      line-height: 24px;
      transition: all 0.3s ease;
    }
  }

  .switter{
    text-decoration: none;
    color: #fff;
    a{
      display: block;
    }
  }

  .switter:hover{
    .iconfont{
      color: #3281c4;
    }
    .iconfont1{
      color: #3281c4;
    }
    .iconfont2{
      color: #3281c4;
    }
  }
  .dalianjie{
    padding: 8px 16px;
    background: #fff;
    color: #303030;
    text-decoration: none;
  }

  .mobil-menu{
    cursor: pointer;
    color: #fff;
    display: none;
    align-items: center;
    span{
      margin-right: 5px;
    }
  }

  .mobil-menu:hover{
    color: #3281c4;
  }
  .dingwei{
    /*position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);*/
    font-size: 24px;
  }

  .daohang-title{
    display: flex;
    span{
      line-height: 56px;
    }
    flex-direction: row;
    align-items: center;
    padding: 0px 30px;
    /*padding-left: 35px;*/
  }
.erweima{
  position: relative;
}
.erweima:hover{
  .erweimapic{
    display: block;
  }
}
.erweimapic{
  display: none;
  width: 100px;
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);

}
</style>
